function fileChange(input) {
    readImage(input.files[0], function (canvas) {
        $.post("/predict", {photo: canvas.toDataURL('image/jpeg',1).split(",")[1]}, function (data) {
            if (data.box) {drawBoxOnImg(canvas, data.box);}
            var image = canvas.toDataURL('image/jpeg', 1);
            $("#image img").attr("src", image);
            $("#bottom").show();
            sessionStorage.image = image;

            printResult(data.predictions);
            sessionStorage.result = JSON.stringify(data.result);
        });
    });
}

function getCanvas(width, height) {
    var maxWidth = 960, maxHeight = 1280;
    var targetWidth = width, targetHeight = height;
    if (width > maxWidth || height > maxHeight) {
        if (width / height > maxWidth / maxHeight) {
            targetWidth = maxWidth;
            targetHeight = Math.round(maxWidth * (height / width));
        } else {
            targetHeight = maxHeight;
            targetWidth = Math.round(maxHeight * (width / height));
        }
    }

    var canvas = document.createElement("canvas");
    canvas.width = targetWidth;
    canvas.height = targetHeight;
    return canvas;
}

function readImage(file, callback) {  // 回调函数返回canvas
    var img = document.createElement('img');
    img.src = URL.createObjectURL(file);

    img.onload = function () {
        EXIF.getData(img, function () {
            var canvas, ctx;
            switch (EXIF.getTag(this, 'Orientation')) {
                case 6:  // 旋转90°
                    canvas = getCanvas(this.height, this.width);
                    ctx = canvas.getContext('2d');
                    ctx.rotate(Math.PI / 2);
                    ctx.translate(0, - canvas.width);
                    ctx.drawImage(this, 0, 0, canvas.height, canvas.width);
                    break;
                case 3:  // 旋转180°
                    canvas = getCanvas(this.width, this.height);
                    ctx = canvas.getContext('2d');
                    ctx.rotate(Math.PI);
                    ctx.translate(- canvas.width, - canvas.height);
                    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
                    break;
                case 8: // 旋转270°
                    canvas = getCanvas(this.height, this.width);
                    ctx = canvas.getContext('2d');
                    ctx.rotate(-Math.PI / 2);
                    ctx.translate(- canvas.height, 0);
                    ctx.drawImage(this, 0, 0, canvas.height, canvas.width);
                    break;
                default: // 不旋转
                    canvas = getCanvas(this.width, this.height);
                    ctx = canvas.getContext('2d');
                    ctx.drawImage(this, 0, 0, canvas.width, canvas.height);
            }
            URL.revokeObjectURL(this.src);
            callback(canvas);
        });
    };
}

function drawBoxOnImg(canvas, box) {
    var ctx = canvas.getContext('2d');
    ctx.setTransform(1, 0, 0, 1, 0, 0);

    ctx.beginPath();
    ctx.lineWidth = "10";
    ctx.strokeStyle = "#0F0";
    ctx.rect(canvas.width * box[1], canvas.height * box[0],
        canvas.width * (box[3] - box[1]), canvas.height * (box[2] - box[0]));
    ctx.stroke();
}

function printResult(result) {
    var diag = $("#diag").empty();
    // diag.append($("<span></span>").text(result).addClass("diag_title"));
    //         .append($("<br>"));
    for (var i in result) {
        diag.append($("<span></span>").text(result[i]).addClass("diag_title"))
            .append($("<br>"));
    }
}

$(function () {
    if (sessionStorage.image) {
        $("#image img").attr("src", sessionStorage.image);
        printResult(JSON.parse(sessionStorage.result));
        $("#bottom").show();
    }
});